<template>
  <div :class="['atom-float-bar', visible ? 'show' : '']">
    <div class="atom-float-bar-content">
      <a-tooltip v-for="action in actions" :key="action.name" :title="action.title">
        <a-button type="text" @click="handleClick(action)">
          <template #icon><IconFont :type="action.icon"/></template>
        </a-button>
      </a-tooltip>
      <a-tooltip v-if="closable" :title="closeTitle">
        <a-button type="text" @click="handleClose">
          <template #icon><IconFont type="CloseCircleFilled"/></template>
        </a-button>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
/**
 * 浮动工具条
 */
export default {
  name: 'FloatBar',
  props: {
    // 是否可见
    modelValue: {
      type: Boolean,
      default: false
    },
    // 操作按钮，与TipButton配置一致
    actions: {
      type: Array,
      required: false
    },
    // 是否可关闭
    closable: {
      type: Boolean,
      default: true
    },
    // 关闭按钮title
    closeTitle: {
      type: String,
      default: '关闭'
    }
  },
  data () {
    return {
      // 是否可见
      visible: false
    }
  },
  watch: {
    // 监听外部的显示与否
    modelValue: {
      immediate: true,
      handler (newValue) {
        this.visible = newValue
      }
    },
    // 监听内部显示与否
    visible (newValue) {
      this.$emit('update:modelValue', newValue)
    }
  },
  emits: ['update:modelValue', 'click', 'close'],
  methods: {
    // 响应action点击
    handleClick (action) {
      this.$emit('click', action)
    },
    // 关闭工具条
    handleClose () {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="less">
  @keyframes move-up {
    0% { bottom: -52px }
    100% { bottom: 52px }
  }
  @keyframes move-down {
    0% { bottom: 52px }
    100% { bottom: -52px }
  }
  .atom-float-bar {
    opacity: 0;
    position: absolute;
    left: 50%;
    bottom: 52px;
    transform: translateX(-50%);
    z-index: 99;
    transition: opacity .3s ease;
    animation: move-down ease .3s;
    &.show {
      opacity: 1;
      animation: move-up ease .3s;
    }
    .atom-float-bar-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid #84858D33;
      background: #313136;
      user-select: none;
      box-shadow: 0 0 1px 1px #1C1C200D, 0 8px 24px #1C1C201F;
      .ant-btn {
        color: #FFFFFF;
        margin: 0 3px;
        border-radius: 8px;
        &:hover {
          background: #FFFFFF2E;
          .anticon-delete {
            color: @error-color;
          }
        }
      }
    }
  }
</style>
